<template>
  <div class="num">
    <!-- 表格 -->
    <el-table
      :data="message.sqlresult"
      style="
        width: auto;
        margin: 20px 20%;
        box-shadow: 4px 4px 4px rgb(235, 235, 235),
          -4px -4px 4px rgb(235, 235, 235), 4px -4px 4px rgb(235, 235, 235),
          -4px 4px 4px rgb(235, 235, 235);
      "
      :stripe="true"
      height="300"
    >
      <el-table-column prop="parkID" label="停车场编号"> </el-table-column>
      <el-table-column prop="parkName" label="停车场名称" width="180">
      </el-table-column>

      <el-table-column prop="lng" label="经度" width="180"> </el-table-column>

      <el-table-column prop="lat" label="纬度" width="180"> </el-table-column>
    </el-table>

    <!-- 统计图 -->
    <div id="chart"></div>
  </div>
</template>


<script>
import * as echarts from "echarts";

export default {
  name: "num",
  data() {
    return {
      message: {}, //接收数据所用的数组
      tableInfo: [],
    };
  },
  mounted() {},
  created() {
    this.getData();
  },

  methods: {
    //获取后端数据
    getData() {
      var url = "http://localhost:3000"; //后端服务端口

      // 获取后端返回的数据
      this.$axios
        .get(url + "/product")
        .then((response) => {
          this.message = response.data;
    
          let Gdata = JSON.parse(JSON.stringify(this.message)); //换区转换后的值
          let data1 = [];
          let data2 = [];
          
          console.log(this.message);
          for (let i = 0; i < this.message.sqlresult.length; i++) {
            this.tableInfo.push({
              parkID: this.message.sqlresult[i].parkID,
              parkName: this.message.sqlresult[i].parkName,
              coor: {
                lng: this.message.sqlresult[i].lng,
                lat: this.message.sqlresult[i].lat,
              },
              resPark: this.message.parkSqlResult[i].resPark,
            });
            data1[i] = this.message.sqlresult[i].parkID;
            data2[i] = this.message.parkSqlResult[i].resPark;
          }
          console.log(data1, data2);
          // 创建图表
          var myChart = echarts.init(document.querySelector("#chart"));

          var option;
          //创建图表

          option = {
            dataZoom: [
              {
                // 这个dataZoom组件，默认控制x轴。
                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10, // 左边在 10% 的位置。
                end: 60, // 右边在 60% 的位置。
                show: true,
              },
              {
                // 这个dataZoom组件，也控制x轴。
                type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 10, // 左边在 10% 的位置。
                end: 60, // 右边在 60% 的位置。
              },
              {
                type: "slider",
                yAxisIndex: 0,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                yAxisIndex: 0,
                start: 0,
                end: 100,
              },
            ],
            xAxis: {
              type: "category",
              data: data1,
              splitLine: {
                show: true,
              },
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: data2,
                type: "bar",
                showBackground: true,
                backgroundStyle: {
                  color: "rgba(180, 180, 180, 0.2)",
                },
              },
            ],
          };

          myChart.on("click", function (event) {
           
          });
          option && myChart.setOption(option);
          console.log("图表创建成功");
        })
        .catch(function (error) {
          console.log(error);
        });
      console.log("create执行");
    },
  },
};
</script>

<style scoped>
.num {
  width: 100%;
  height: 100%;
}
#chart {
  width: 60%;
  height: 500px;
  margin: 20px 20%;
  box-shadow: 4px 4px 4px rgb(235, 235, 235), -4px -4px 4px rgb(235, 235, 235),
    4px -4px 4px rgb(235, 235, 235), -4px 4px 4px rgb(235, 235, 235);
}
</style>